<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>每日特价</title>
    <style>
        .nav {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .daily-special {
            font-size: 24px;
            font-weight: bold;
            margin-right: 100px;
        }
        .menu {
            display: flex;
        }
        .menu-item {
            font-size: 18px;
            margin: 0 20px;
            cursor: pointer;
            padding-bottom: 5px;
        }
        .menu-item.active {
            color: red;
            border-bottom: 2px solid red;
        }
        .banner {
            width: 505px;
            height: 200px;
            overflow: hidden;
        }
        .banner img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div class="nav">
        <div class="daily-special">张坚</div>
        <div class="menu">
            <div class="menu-item active" data-img="banner1.jpg">精选</div>
            <div class="menu-item" data-img="banner2.jpg">美食</div>
            <div class="menu-item" data-img="banner3.jpg">百货</div>
            <div class="menu-item" data-img="banner4.jpg">个护</div>
            <div class="menu-item" data-img="banner5.jpg">预告</div>
        </div>
    </div>
    <div class="banner">
        <img src="./banner.jpg" alt="精选 banner">
        <img src="./banner1.jpg" alt="精选 banner">
        <img src="./banner2.jpg" alt="精选 banner">
        <img src="./banner3.jpg" alt="精选 banner">
        <img src="./banner4.jpg" alt="精选 banner">
    </div>

    <script>
        const menuItems = document.querySelectorAll('.menu-item');
        const bannerImg = document.querySelector('.banner img');

        menuItems.forEach(item => {
            item.addEventListener('click', function() {
                menuItems.forEach(menuItem => {
                    menuItem.classList.remove('active');
                });
                this.classList.add('active');
                bannerImg.src = this.getAttribute('data-img');
                bannerImg.alt = this.textContent + ' banner';
            });
        });
    </script>
</body>
</html>